<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link href="https://js.arcgis.com/4.21/esri/themes/light/main.css" rel="stylesheet"/>
    <script src="https://js.arcgis.com/4.21/"></script>
    <script>
        require(["esri/widgets/Locate","esri/widgets/Popup","esri/layers/WebTileLayer", "esri/Basemap", "esri/Map", "esri/views/SceneView","esri/widgets/BasemapToggle"],
            (Locate,Popup,WebTileLayer, Basemap, Map, SceneView,BasemapToggle) => {

                /**
                 * WebTileLayer 提供了一种将非 ArcGIS Server 地图切片作为图层添加到地图的简单方法。
                 * 构造函数，通常如下的图案的URL模板http://some.domain.com/{level}/{col}/{row}/，
                 * 其中level对应于缩放级别，并column和row代表瓷砖列和行，分别。这种模式不是必需的，
                 * 但它是目前网络上最常见的一种。
                 */
                let mapBaseLayer = new WebTileLayer({
                    //url 模板是一个字符串，用于指定要加载的托管磁贴图像的 URL
                    urlTemplate:"https://stamen-tiles-{subDomain}.a.ssl.fastly.net/terrain/{level}/{col}/{row}.png",

                    //提供瓷砖以加快瓷砖检索的子域名字符串
                    subDomains:['a','b','c','d'],
                    //图层的属性信息
                    copyright:'Map tiles by <a href="http://stamen.com/">Stamen Design</a>, ' +
                        'under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. ' +
                        'Data by <a href="http://openstreetmap.org/">OpenStreetMap</a>, ' +
                        'under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
                });


                let basemap = new Basemap({
                    baseLayers: [mapBaseLayer],
                    title: "Terrain",
                    id: "terrain",
                    //指向表示底图的图像的 URL。
                    thumbnailUrl: "https://stamen-tiles.a.ssl.fastly.net/terrain/10/177/409.png"
                });


                var map = new Map({
                    basemap: "satellite",
                    ground: "world-elevation"
                })

                var view = new SceneView({
                    container: "viewDiv",
                    map: map,
                    zoom: 16,
                    camera:{
                        fov: 55,//较小的 fov 角模拟远摄镜头放大，而较大的 fov 角模拟鱼眼镜头缩小。默认角度为 55 度
                        heading: 0,//当北方位于屏幕顶部时，航向为零, 当值为180的时候,南方在屏幕顶部,值在0-360之间
                        position: [116.39, 39.90, 1300],//相机的位置,经度 纬度 高度
                        tilt: 45,//垂直向下看表面时倾斜度为零，当相机平行于表面看时倾斜度为 90 度,平行于地面角度为180
                    }
                });

                //使用世界地理编码服务创建一个定位器任务
                const locatorTask = new Locate({
                    url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
                });

                view.when(()=>{
                    let basemapToggle = new BasemapToggle({
                        nextBasemap:basemap,
                        view:view,
                        visibleElements:false
                    });

                    //添加切换组件,在右上方
                    view.ui.add(basemapToggle,"top-right");

                    view.on("click",(event)=>{
                        //获取地图点的经纬度坐标
                        let lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
                        let lon = Math.round(event.mapPoint.longitude * 1000) / 1000;

                        view.popup.open({
                            title: "点击的位置为[" + lat + "," + lon + "]",
                            content: "点击的位置为[" + lat + "," + lon + "],您肯定没去过",
                            location: event.mapPoint,
                        })
                    })
                });

            });
    </script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
